<template>
  <div style="width: 100%;height: 100vh;color:var(--color-neutral-10);margin: 0 auto">
    <div style="padding: 40px 0 0 0;margin: 0 auto;max-width: 1550px;width: 90%;">
      <p style="font-size: 24px;font-weight: bold;margin-bottom: 20px">轮播图管理</p>
    </div>
    <div style="width: 100%;height: calc(100% - 96px);position: relative;text-align: center;overflow-y: auto;overflow-x: hidden;">
      <div style="width: 90%;max-width: 1550px;display: inline-block;text-align: left;position: relative;padding-bottom: 40px;">
        <p style="font-size: 18px;font-weight: bold;margin-top: 10px;">效果预览</p>
        <p style="margin-top: 10px;">受页面布局限制，此轮播图仅供参考，请以首页轮播图为准。</p>
        <banner :app-data="appData" :banners="data.bannersDis" v-if="data.banners!=undefined" style="border-radius: 5px;overflow: hidden;margin-top: 10px;width: 1940px;margin-left: calc(50% - 0px);transform: translateX(-50%);max-width: calc(100vw - 240px);"></banner>
        <p style="font-size: 18px;font-weight: bold;margin-top: 20px;">编辑</p>
        <div style="width: calc(100% + 20px);">
          <div class="card" v-for="item in data.banners" style="display: inline-block;height: 300px;margin-top: 15px;border-radius: 10px;position: relative;"
            :style="{
                width:'calc((100%) /' + data.singleLineNum.toString() + ')'
            }"
        >
          <div class="cardInside" style="width: calc(100% - 20px);height: 100%;position: relative;background-position: center;background-repeat: no-repeat;background-size: cover;"
            :style="{
                backgroundImage:getBackgroundURL(item),
            }"
          >
            <div v-if="item.show==true" style="width: 100%;height: 100%;position: absolute;padding: 20px 20px;">
                <p>标题</p>
                <input v-model="item.title" type="text" style="margin-top: 10px;line-height: 30px;color: var(--color-neutral-10);width: 100%;border: 0;" placeholder="请输入标题" />
                <p style="margin-top: 10px;">副标题</p>
                <input v-model="item.subTitle" type="text" style="margin-top: 10px;line-height: 30px;color: var(--color-neutral-10);width: 100%;border: 0;" placeholder="请输入副标题" />
                <p style="margin-top: 10px;">链接</p>
                <input v-model="item.link" type="text" style="margin-top: 10px;line-height: 30px;color: var(--color-neutral-10);width: 100%;border: 0;" placeholder="请输入跳转链接" />
                <div style="margin-top: 10px;text-align: right;">
                  <button @click="item.show = false">返回</button>
                  <button @click="showBigPicture(item)">查看</button>
                  <button @click="deleteBanner(item)">删除</button>
                  <button @click="saveBanner()">保存</button>
                </div>
              </div>
              <div @click="()=>{
                item.show = true
              }" v-if="item.show!=true" class="cardTag" style="position: absolute;right: 10px;top: 10px;border-radius: 100px;width: 30px;height: 30px;box-shadow: 0 4px 10px rgba(0,0,0,0.1);background-color: var  (--color-neutral-1);color: var(--color-neutral-10);padding: 0 0;padding-left: 4px;padding-top: 4px;">
                <svg width="22" height="22" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M35 21h6v6h-6v-6zm-22 0v6H7v-6h6zm14 0v6h-6v-6h6z" fill="currentColor"/></svg>
              </div>
          </div>
        </div>


        <div class="card" style="display: inline-block;height: 300px;margin-top: 15px;border-radius: 10px;position: relative;cursor: pointer;"
            :style="{
                width:'calc((100%) /' + data.singleLineNum.toString() + ')'
            }"
        >
          <div class="cardInside" style="width: calc(100% - 20px);height: 100%;position: relative;background-position: center;background-repeat: no-repeat;background-size: cover;padding-top: 150px;text-align: center;position: absolute;"
          >
          <a-upload accept=".png,.jpg,.jpeg,.bmp,.webp" @success="uploadedBanner" :action="appData.serverURL + '/upload'" style="transform: translateY(-50%);display: inline-block;background-color: transparent;"></a-upload>
          </div>
        </div>


        </div>
        
      </div>
    </div>
  </div>
</template>

<script>
  import tool from '@/utlis/tool'
  import config from '@/config'
  import banner from '@/components/banner.vue'
  import axios from 'axios'
  
  export default {
    components:{
        banner
    },
    name: '',
    data() {
      return {
        data:{
          loading:false,
          banners:undefined,
          bannersDis:undefined,
          singleLineNum:3,
        }
      }
    },
  
    methods: {
      async uploadedBanner(e){
        let current = JSON.parse(JSON.stringify(this.data.banners))
        current.push({
          title:'',
          subTitle:'',
          link:'',
          background:e.response.results
        })
        current = JSON.stringify(current)
        let re = await tool.axiosPostWithCheckStatus(config.serverURL,"/setting/changeValue",{
          token:this.bgData.loginedAdminInfo.token,
          keyName:'banner',
          value:current
        })
        this.getBanner()
      },
      async saveBanner(){
        let current = JSON.parse(JSON.stringify(this.data.banners))
        for(let i=0;i<current.length;i++){
          current[i].show = false
        }
        current = JSON.stringify(current)
        let re = await tool.axiosPostWithCheckStatus(config.serverURL,"/setting/changeValue",{
          token:this.bgData.loginedAdminInfo.token,
          keyName:'banner',
          value:current
        })
        this.getBanner()
      },
      showBigPicture(item){
          window.open(config.serverURL + "/download/" + item.background,"_blank")
      },
      async deleteBanner(item){
          let current = []
          for(let i=0;i<this.data.banners.length;i++){
            if(i==item.index){
              continue
            }
            current.push(JSON.parse(JSON.stringify(this.data.banners[i])))
          }
          let re = await(tool.axiosPostWithCheckStatus(config.serverURL,"/setting/changeValue",{
            token:this.bgData.loginedAdminInfo.token,
            keyName:'banner',
            value:JSON.stringify(current)
          }))
          this.getBanner()
      },
      getBackgroundURL(item){
            return "url(" + config.serverURL + "/download/" + item.background + ")"
      },
      async getBanner(){
          this.data.banners = undefined
          this.data.bannersDis = undefined
          let banners = JSON.parse((await this.getSettingFromBackend('banner')).results.value)
          for(let i=0;i<banners.length;i++){
            banners[i].index = i
          }
          this.data.banners = JSON.parse(JSON.stringify(banners)) 
          if(banners.length!=1){
            let temp = []
            temp.push(JSON.parse(JSON.stringify(banners[banners.length-2])))
            temp.push(JSON.parse(JSON.stringify(banners[banners.length-1])))
            for(let i = 0;i<banners.length-2;i++){
              temp.push(JSON.parse(JSON.stringify(banners[i])))
            }
            banners = temp
          }
          let defaultLength = banners.length
          let c = 0
          while(banners.length<14){
            banners.push(JSON.parse(JSON.stringify(banners[c])))
            c+=1
            if(c==defaultLength){
              c = 0
            }
          }
          for(let i=0;i<banners.length;i++){
            banners[i].index = i
          }
          this.data.bannersDis = banners
      },
      getSettingFromBackend(keyName){
            return new Promise(async (resolve, reject) => {
              return resolve(await this.axiosPost('/setting/get',{
                keyName:keyName
              }))
            })
      },
      axiosPost(url,data){
      return new Promise((resolve, reject) => {
        data = tool.encodeString(JSON.stringify(data));
        var config = {
           method: 'post',
           url: this.appData.serverURL + url,
           data : data,
           headers: { 
              'Accept': '*/*', 
           },
        };
        axios(config).then((res) => {
          return resolve(JSON.parse(tool.decodeString(res.data)))
        })
      })
      },
    },
  
    //生命周期 - 挂载完成（可以访问DOM元素）",html模板已渲染
    async mounted() {
        await this.getBanner()

        setInterval(() => {
          if(this.appData.pageSize.width<=1500){
            this.data.singleLineNum = 2
          }else{
            this.data.singleLineNum = 3
          }
        }, 10);
    },
  
    props: {
      appData:undefined,
      bgData:undefined
    },
  
    //监听属性 类似于data概念",
    computed: {},
  
    //监控data中的数据变化",
    watch: {},
  
    //生命周期 - 创建完成（可以访问当前this实例）",数据模型已加载，方法已加载,html模板已加载,html模板未渲染
    created() {
    },
  
    //生命周期 - 挂载之前",html模板未渲染
    beforeMount() {
    },
  
    //生命周期 - 更新之前",数据模型已更新,html模板未更新
    beforeUpdate() {
    },
  
    // 生命周期 - 销毁之前调用
    beforeDestroy() {
    },
  
    //生命周期 - 更新之后",数据模型已更新,html模板已更新
    updated() {
    },
  
    //生命周期 - 销毁完成"
    destroyed() {
    },
  
    //如果页面有keep-alive缓存功能，这个函数会触发",
    activated() {
    }
  }
  </script>
  
  <style scoped>
        
  button{
      padding:10px 20px;
      border: 0;
      background-color: rgba(242,242,242,0.1);
      border: 2px solid transparent;
      border-radius: 5px;
      margin-left: 5px;
      cursor: unset;
  }

  button:hover{
      background-color: rgba(230,230,230,0.1);
      border: 2px solid rgba(200,200,200,0.1);
  }

  button:active{
      background-color: rgba(200,200,200,0.1);
      border: 2px solid rgba(200,200,200,0.1);
  }

  .cardInside{
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    overflow: hidden;
  }

  .cardInside:hover{
    background-color: var(--color-neutral-1);
  }

  .card{
    
  }

  .card div{
    backdrop-filter: blur(20px);
    /* padding: 20px 20px; */
    background-color: var(--color-neutral-2);
  }

  .cardTag{
    opacity: 0;
    cursor: pointer;
  }

  .cardTag:hover{
    background-color: var(--color-neutral-3);
  }
  
  .card:hover .cardTag{
    opacity: 1;
  }

  .right-back-button:hover{
    background-color: var(--color-neutral-3);
  }
  
  </style>